<template>
  <dl>
    <dt>分辨率设置</dt>
    <dd class="m1">
      <select @change="onChange" v-model="value">
        <option v-for="(d, i) of dpiList" :value="i" :key="i">{{d.width}}*{{d.height}}</option>
      </select>
    </dd>
  </dl>
</template>

<script>
/* eslint-disable */
import excuIntervalTryPlus from '@/modules/corejs/excu/excu-interval-try.js'
import dataApi from '@/view/v/data-api'
// import BaseSelect from '@/components/forms/BaseSelect'
if (process.env.NODE_ENV !== 'production') {
  window.sd = {
    data: {
      ratio: [ // 班牌  分辨率
        { id: '1080*1920', name: '1080*1920', type: '1' },
        { id: '1920*1080', name: '1920*1080', type: '1' },
        { id: '1080*1920', name: '1080*1920', type: '2', width: 1080, height: 1920 },
        { id: '1920*1080', name: '1920*1080', type: '2', width: 1920, height: 1080 },
        { id: '1600*512', name: '1600*512', type: '2', width: 1600, height: 512 },
        { id: '512*416', name: '512*416', type: '2', width: 512, height: 416 },
        { id: '1080*1920', name: '1080*1920', type: '3' }
      ]
    }
  }
}

export default {
  data () {
    return {
      value: 0,
      dpiList: [
        // {
        //   width: 1080,
        //   height: 1920
        // },
        // {
        //   width: 1366,
        //   height: 768
        // }
      ]
    }
  },
  computed: {
    dpi () {
      return dataApi.core.dpi
    }
  },
  created () {
    excuIntervalTryPlus(() => {
      if (window.sd) {
        let list = []
        window.sd.data.ratio.forEach(function (item) {
          if (item.type === '2') list.push(item)
        })
        this.dpiList = list
        return false
      }
    })
  },
  mounted () {
    this.syncSelect(this.dpi)
  },
  methods: {
    onChange ({ target }) {
      let s = this.dpiList[target.value]
      dataApi.core.dpi = s
      this.isSet = true
    },
    onChangeColor (v) {
      this.background.color = v
    },
    syncSelect (dpi) {
      this.dpiList.forEach((d, i) => {
        if (d.width === dpi.width && d.height === dpi.height) {
          this.value = i
        }
      })
    }
  },
  watch: {
    dpi (dpi) {
      // 事件设置情况不检测选择同步
      if (this.isSet) {
        this.isSet = false
        return
      }
      // 数据改变情况同步选择
      this.syncSelect(dpi)
    },
    dpiList () {
      // 数据改变情况同步选择
      this.syncSelect(this.dpi)
    }
  }
}
</script>
